<template>
	<view class="content">
		<image class="custom-bj" src="@/static/images/news/min-bj.png"></image>
		<view class="list">
			<view v-if="list.length > 0">
				<block v-for="(item, index) in list" :key="index">
					<activity-li :item="item"></activity-li>
				</block>
				<LoadMore :finished="isReachBottom"></LoadMore>
			</view>
			<LoadMore v-else :empty="true" emptyText="暂无消息"></LoadMore>
		</view>
	</view>
</template>

<script>
import LoadMore from '@/components/LoadMore';
import ActivityLi from '@/components/news/ActivityLi';

export default {
	data() {
		return {
			params: {
				page: 1,
				size: 15
			},
			list: [],
			pagination: {},
			isReachBottom: false
		};
	},
	components: {
		LoadMore,
		ActivityLi
	},
	onShow() {
		this.getList({ ...this.params });
	},
	methods: {
		getList(params) {
			this.$service.news.notices
				.page(params)
				.then(res => {
					this.pagination = res.pagination;
					if (res.pagination.page > 1) {
						this.list = this.list.concat(res.list);
					} else {
						this.list = res.list;
					}
					uni.stopPullDownRefresh();
				})
				.catch(err => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
		}
	},
	onPullDownRefresh() {
		this.getList({ ...this.params });
	},
	onReachBottom() {
		if (
			this.pagination.page * (this.pagination.pageSize || this.pagination.size) >=
			this.pagination.total
		) {
			this.isReachBottom = true;
		} else {
			this.isReachBottom = false;
			this.getList({
				...this.params,
				page: this.pagination.page + 1
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	background: #f6f7fa;
	height: 100vh;
	.custom-bj {
		width: 100%;
		height: 172rpx;
		position: relative;
		z-index: 10;
	}
	.list {
		position: relative;
		z-index: 20;
		width: 700rpx;
		margin: auto;
		margin-top: -120rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 20rpx 40rpx 0;
		/deep/.activity-list__item {
			padding: 30rpx 50rpx 0rpx 40rpx;
			.activity-list__item-value {
				padding-bottom: 20rpx;
			}
		}
	}
}
</style>
